<template>
	<view class="container">
		<topView @pickerlan="pickerlan"></topView>
		<view class="buy-tips">{{$t('language.buyPro')}}</view>
		<view class="main-container">
			<view class="progress-container">
				<view class="select-level">1</view>
				<view class="select-text">{{$t('language.jindu1')}}</view>
				<view class="divider-unselect"></view>
				<view class="unselect-level">2</view>
				<view class="unselect-text">{{$t('language.jindu2')}}</view>
				<view class="divider-unselect"></view>
				<view class="unselect-level">3</view>
				<view class="unselect-text">{{$t('language.jindu3')}}</view>
			</view>
			<view class="item-container">
				<view :class="currentIndex == index ? 'item-select' : 'item-unselect'" @click="switchIndex(item,index)"
					v-for="(item,index) in numList" :key="index">
					<image v-if="currentIndex == index" class="right-image" src="../../static/icon_pay_right.png">
					</image>
					<view class="item-top-container">
						<image class="item-num-image" :src="$imgUrl+item.goods_img"></image>
						<view class="item-num-text">x{{item.gold_sum}}</view>
					</view>
					<view class="item-price-didver"></view>
					<view :class="currentIndex == index ? 'item-price-select' : 'item-price-unselect'">
						{{item.price}}{{$t('language.yuan')}}
					</view>
				</view>
			</view>
			<view class="pay-way-container">
				<view class="item-title">{{$t('language.paystyle')}}：</view>
				<view :class="currentPayIndex == 0 ? 'pay-way-select':'pay-way-unselect'" style="margin-left: 10rpx;"
					@click="switchPayIndex(0)">
					<image class="right-image" style="width: 30rpx;height: 30rpx;" v-if="currentPayIndex ==0"
						src="../../static/icon_pay_right.png"></image>
					<image class="pay-way-image" src="../../static/icon_zhifubao.png"></image>
					<view class="pay-way-text">{{$t('language.zhifubao')}}</view>
				</view>
				<view :class="currentPayIndex == 1 ? 'pay-way-select':'pay-way-unselect'"
					style="margin-left: 32rpx;margin-right: 32rpx;" @click="switchPayIndex(1)">
					<image class="right-image" style="width: 30rpx;height: 30rpx;" v-if="currentPayIndex ==1"
						src="../../static/icon_pay_right.png"></image>
					<image class="pay-way-image" src="../../static/icon_weixin.png"></image>
					<view class="pay-way-text">{{$t('language.weixin')}}</view>
				</view>
				<view class='pay-way-unselect'>
					<!-- <image class="right-image" style="width: 30rpx;height: 30rpx;" v-if="currentPayIndex ==2"
						src="../../static/icon_pay_right.png"></image> -->
					<view class="pay-way-text">{{$t('language.paypal')}}</view>
				</view>
			</view>
			<view class="number-container">
				<view class="item-title">{{$t('language.shuliang')}}：</view>
				<view class="add-plus-container">
					<view class="add" @click="reduce">-</view>
					<input class="uni-input input-container num-num" v-model="sum" :placeholder="$t('language.placeholder')" type="number" @input="change"/>
					<view class="add" @click="add">+</view>
				</view>
				<view class="item-title">{{stock>0?`有货(${stock})`:'无货'}}</view>
			</view>
			<view class="ensure-button" @click="ensure">{{$t('language.queren')}}</view>
			<view class="shiyong-button" @click="openImg()">{{$t('language.shiyongfangfa')}}</view>
		</view>
		<view class="copy-right-container">Copyright 2020 {{$t('language.mayi')}}</view>
	</view>
</template>

<script>
	import topView from '@/components/topView/topView.vue'
	export default {
		data() {
			return {
				currentIndex: 0,
				currentPayIndex: 0,
				sum: 1,
				numList: [],
				currOrder: {},
				goods_id:'',
			}
		},
		computed:{
			stock(){
				return this.currOrder.goods_stock - this.sum
			}
		},
		async onLoad(options) {
			var goodObj = JSON.parse(options.goodObj);
			this.goods_id=goodObj.id
			this.getgoodsDetail()
		},
		methods: {
			switchIndex(item, index) {
				this.currentIndex = index
				this.currOrder = item
			},
			switchPayIndex(index) {
				this.currentPayIndex = index
			},
			openImg(){
				uni.navigateTo({
					url: '/pages/index/shiyongfangfa'
				})
			},
			getgoodsDetail(){
				this.$http.post('order.goodsDetail', {
					goods_id: this.goods_id,
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						this.numList = res.data
						this.currOrder = this.numList[0]
					}
				}).catch(e => {})
			},
			pickerlan(i){
				var lan=i>0?'en':'cn'
				this.$i18n.locale = lan //this.$i18n的local进行语言切换
				window.sessionStorage.setItem('lang', lan)
				setTimeout(()=>{
					this.getgoodsDetail()
				})
				
			},
			reduce() {
				if (this.sum <= 1) {
					return false
				} else {
					this.sum--
				}
			},
			add() {
				if(this.sum < this.currOrder.goods_stock){
					this.sum++
				}else{
					return false
				}
			},
			change(v){
				var value=v.detail.value
				if (value==0) {
					uni.showToast({
						title: '购买数量不能少于1',
						icon: 'none'
					})
					return;
				} else if((value>=this.currOrder.goods_stock&&this.stock<0)){
					uni.showToast({
						title: '不能超过库存',
						icon: 'none'
					})
					this.sum=this.currOrder.goods_stock
					return
				}
			},
			ensure() {
				if (!this.currOrder.price) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return;
				} 
                if (this.sum==0) {
                	uni.showToast({
                		title: '购买数量不能少于1',
                		icon: 'none'
                	})
                	return;
                }
				if (this.currentPayIndex==1) {
					uni.showToast({
						title: '待开放',
						icon: 'none'
					})
					return;
				}
				if((this.sum>=this.currOrder.goods_stock&&this.stock<0)){
                	uni.showToast({
                		title: '不能超过库存',
                		icon: 'none'
                	})
                	this.sum=this.currOrder.goods_stock
                	return
                }
				this.$http.post('order.addOrder', {
					method: 'web',
					sort_id: this.currOrder.id,
					sum: this.sum,
					type: this.currentPayIndex == '0' ? 'alipay' : this.currentPayIndex == '1' ? 'wechat' : ''
				}).then(res => {
					// if (this.currentPayIndex == '0') {
					// 	if (res.code == 1) {
					// 		const div = document.createElement('div')
					// 		div.innerHTML = res.data
					// 		document.body.appendChild(div)
					// 		document.forms[0].submit()
					// 	}
					// } else {
					// 	location.href = res.data
					// }
					const div = document.createElement('div')
					div.innerHTML = res.data
					document.body.appendChild(div)
					document.forms[0].submit()
					console.log("成功",res)
				}).catch(e => {
					console.log("失败",e)
					const div = document.createElement('div')
					div.innerHTML = e
					document.body.appendChild(div)
					document.forms[0].submit() //重要，这个才是点击跳页面的核心
					
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F0F2F5;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.buy-tips {
		width: 1820rpx;
		padding-left: 30rpx;
		margin: 48rpx auto 0;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.7000);
	}

	.main-container {
		width: 1820rpx;
		min-height: 1132rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		margin: 32rpx auto;
		padding-bottom: 32rpx;
		display: flex;
		flex-direction: column;
	}

	.progress-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 202rpx;
		width: 1416rpx;
		margin-top: 80rpx;
	}

	.select-level {
		width: 64rpx;
		height: 64rpx;
		background: linear-gradient(360deg, #4185FF 0%, #73B1FF 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: HelveticaNeue;
		color: #FFFFFF;
		border-radius: 50%;
	}

	.unselect-level {
		width: 64rpx;
		height: 64rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.1500);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: HelveticaNeue;
		color: rgba(0, 0, 0, 0.1500);
		border-radius: 50%;
	}

	.divider-select {
		width: 280rpx;
		height: 2rpx;
		background: #4185FF;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.divider-unselect {
		width: 280rpx;
		height: 2rpx;
		background: rgba(0, 0, 0, 0.1500);
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.select-text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6500);
		margin-left: 16rpx;
	}

	.unselect-text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.1500);
		margin-left: 16rpx;
	}

	.item-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin:176rpx 538rpx 0;
		flex-wrap: wrap;
	}

	.item-select {
		width: 224rpx;
		height: 196rpx;
		border-radius: 4rpx;
		border: 1rpx solid #4185FF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-unselect {
		width: 224rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #D1D2D5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.right-image {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 0;
		top: 0;
	}

	.item-top-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 42rpx;
	}

	.item-num-image {
		width: 36rpx;
		height: 36rpx;
	}

	.item-num-text {
		font-size: 36rpx;
		margin-left: 16rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8500);
	}

	.item-price-didver {
		width: 200rpx;
		height: 2rpx;
		border-bottom: 1rpx dashed #cccccc;
	}

	.item-price-select {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4185FF;
		margin-bottom: 16rpx;
	}

	.item-price-unselect {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8500);
		;
		margin-bottom: 16rpx;
	}

	.pay-way-container {
		display: flex;
		margin-left: 542rpx;
		margin-top: 90rpx;
		flex-direction: row;
		align-items: center;
	}

	.item-title {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8500);
	}

	.pay-way-select {
		width: 196rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #4185FF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}

	.pay-way-unselect {
		width: 196rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.3000);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}

	.pay-way-image {
		width: 36rpx;
		height: 36rpx;
	}

	.pay-way-text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6500);
		margin-left: 10rpx;
	}

	.number-container {
		display: flex;
		flex-direction: row;
		margin-left: 542rpx;
		margin-top: 42rpx;
		align-items: center;
	}

	.input-container {
		width: 308rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #D9D9D9;
		margin-left: 10rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.ensure-button {
		width: 736rpx;
		height: 80rpx;
		background: linear-gradient(360deg, #4185FF 0%, #73B1FF 100%);
		border-radius: 40rpx;
		margin-left: 542rpx;
		margin-top: 100rpx;
		margin-bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.shiyong-button{
		width: 100%;
		margin-bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF0000;
	}
	.add-plus-container {
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.add {
		width: 40rpx;
		height:44rpx;
		border: 1px solid #D1D2D5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 28rpx;
		cursor: pointer;
	}

	.num-num {
		height: 46rpx;
		width: 62rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		text-align: center;
		padding-left: 0;
	}
	.copy-right-container {
		width: 100%;
		height: 136rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.4500);
		padding-top: 48rpx;
	}
</style>
